<template>
    <div>
        <el-table border
                  :data="tableData" stripe
                  style="width: 100%;height: 100%"
                  @selection-change="handleSelectionChange">
            <el-table-column
                    label="序号"
                    type="index"
                    width="50"
                    align="center">
                <template slot-scope="{row, $index}">
                    <span>{{(curPage - 1) * 10 + $index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="bid" label="通信重要建筑物编号" :min-width="100">
                <template slot-scope="{row, $index}">
                    <span>{{row.bid}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="objectName" label="目标名称" :min-width="80">
                <template slot-scope="{row, $index}">
                    <span>{{row.objectName}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="location" label="地理位置(街道/门牌)" :min-width="95">
                <template slot-scope="{row, $index}">
                    <span>{{row.location}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="lon" label="经度" :min-width="70">
                <template slot-scope="{row, $index}">
                    <span>{{row.lon}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="lat" label="纬度" :min-width="70">
                <template slot-scope="{row, $index}">
                    <span>{{row.lat}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="structType" label="结构类型" :min-width="100">
                <template slot-scope="{row, $index}">
                    <span>{{row.structType}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="structArea" label="建筑面积(㎡)" :min-width="80">
                <template slot-scope="{row, $index}">
                    <span>{{row.structArea}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="year" label="建筑年代" :min-width="80">
                <template slot-scope="{row, $index}">
                    <span v-if="row.year">{{row.year}}年</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="storyNumber" label="层数" :min-width="50">
                <template slot-scope="{row, $index}">
                    <span>{{row.storyNumber}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="strutHeight" label="总高度(m)" :min-width="70">
                <template slot-scope="{row, $index}">
                    <span>{{row.strutHeight}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="firstHeight" label="首层高度(m)" :min-width="80">
                <template slot-scope="{row, $index}">
                    <span>{{row.firstHeight}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="intensity" label="抗震设防烈度" :min-width="70">
                <template slot-scope="{row, $index}">
                    <span v-if="row.intensity">{{row.intensity}}度</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="fieldType" label="场地类型" :min-width="80">
                <template slot-scope="{row, $index}">
                    <span v-if="row.fieldType">{{row.fieldType}}类</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="planeRegularization" label="平立面度规则度" :min-width="80">
                <template slot-scope="{row, $index}">
                    <span>{{row.planeRegularization}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="foundationType" label="基础形式" :min-width="80">
                <template slot-scope="{row, $index}">
                    <span>{{row.foundationType}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="useful" label="用途" :min-width="80">
                <template slot-scope="{row, $index}">
                    <span>{{row.useful}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="columConcreteStrength" label="柱子混凝土强度等级" :min-width="100">
                <template slot-scope="{row, $index}">
                    <span>{{row.columConcreteStrength}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="mortarStrength" label="砂浆强度" :min-width="80">
                <template slot-scope="{row, $index}">
                    <span>{{row.mortarStrength}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="brickStrength" label="砖强度" :min-:min-width="80">
                <template slot-scope="{row, $index}">
                    <span>{{row.brickStrength}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="status" label="现状评级" :min-:min-width="80">
                <template slot-scope="{row, $index}">
                    <span>{{row.status}}级</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="reconstructionCost" label="重建单位面积造价(万元/㎡)" :min-width="80">
                <template slot-scope="{row, $index}">
                    <span>{{row.reconstructionCost}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="imgsPath" label="相关图片" :min-width="80">
                <template slot-scope="{row, $index}">
                    <el-button class="el-button el-button--mini el-button--primary"
                               @click="opDialog3(row.imgsPath)">查看
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="data" label="操作" :min-width="140">
                <template slot-scope="{row, $index}">
                    <el-row>
                        <el-col :span="12">
                            <el-button class="el-button el-button--mini el-button--success"
                                       @click="opDialog2(row.id)">修改
                            </el-button>
                        </el-col>
                        <el-col :span="12">
                            <el-button class="el-button el-button--mini el-button--danger"
                                       @click="opDialog(row.id)">删除
                            </el-button>
                        </el-col>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                title="相关图片信息"
                :visible.sync="dialogVisible3"
                v-if="dialogVisible3"
                :before-close="handleClose">
            <div class="dialog-pane" style="overflow-x:scroll">
                <imgs-dialog :imgs-path="imgsPath"></imgs-dialog>
            </div>
            <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialogVisible3 = false">关 闭</el-button>
                        </span>
        </el-dialog>
        <msg-dialog @yes="deleteTask" @no="onCancel" :dialog-visible="dialogVisible"
                    :msg="msg"></msg-dialog>
        <el-dialog
                title="修改通信重要建筑物信息"
                :visible.sync="dialogVisible2"
                width="48%"
                v-if="dialogVisible2"
                :before-close="handleClose">
            <new-correspond-building ref="newDataForm" :id="chooseId"
                                     @updateData="updateData"/>
            <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="submitForm" v-loading.fullscreen.lock="fullscreenLoading">保 存</el-button>
    </span>
        </el-dialog>
    </div>
</template>
<script>
    import MsgDialog from "../../menu/MsgDialog";
    import qs from "qs";
    import NewCorrespondBuilding from "../../form/NewCorrespondBuilding";
    import ImgsDialog from "../../menu/ImgsDialog";

    export default {
        name: "CorrespondBuildingTable",
        components: {
            ImgsDialog,
            NewCorrespondBuilding,
            MsgDialog
        },
        data() {
            return {
                msg: '确定删除此通信室重要建筑数据',
                editTaskName: false,
                editRemark: false,
                multipleSelection: [],
                // structType: ['砌体结构', '框架结构', '框架核心筒', '框架剪力墙', '剪力墙结构'],
                dialogVisible: false,
                dialogVisible2: false,
                dialogVisible3: false,
                chooseId: '',
                fullscreenLoading: false
            }
        },
        props: {
            tableData: {
                type: Array,
                defult: []
            },
            curPage: {
                type: Number,
                defult: 1
            }
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            deleteTask() {
                axios.post("/bjdzms/correspondImportBuilding/del",
                    qs.stringify({
                        'id': this.chooseId
                    })).then(data => {
                    this.total = data.data;
                    this.dialogVisible = false;
                    this.$emit('updateData');
                });
            },
            updateData() {
                this.$emit('updateData');
                this.fullscreenLoading = false;
                this.dialogVisible2 = false;
            },
            opDialog(id) {
                this.dialogVisible = true;
                this.chooseId = id;
            },
            opDialog2(id) {
                this.dialogVisible2 = true;
                this.chooseId = id;
            },
            opDialog3(imgsPath) {
                this.dialogVisible3 = true;
                this.imgsPath = imgsPath;
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.taskTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.taskTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            resetDateFilter() {
                this.$refs.taskTable.clearFilter('data');
            },
            clearFilter() {
                this.$refs.taskTable.clearFilter();
            },
            onCancel() {
                this.dialogVisible = false;
            },
            submitForm() {
                this.$refs.newDataForm.submitForm();
                this.fullscreenLoading = true;
            }
        }
    }
</script>

<style scoped>

</style>
